<template>
  <dv-border-box-11 style="padding-top: 10px">
    <dv-decoration-7 style="width: 100%; height: 30px"
      >能耗总览</dv-decoration-7
    >
    <el-row>
      <!-- 耗电量 -->
      <el-col :span="8">
        <div id="main1" style="width: 100%; height: 250px"></div>
      </el-col>
      <!-- 耗水量 -->
      <el-col :span="8">
        <div id="main2" style="width: 100%; height: 250px"></div>
      </el-col>
      <!-- 碳排放 -->
      <el-col :span="8">
        <div id="main3" style="width: 100%; height: 250px"></div>
      </el-col>
    </el-row>
  </dv-border-box-11>
</template>

<script>
export default {
  name: "Dashboard",
  mounted() {
    this.initEchart();
  },
  data() {
    return {};
  },
  methods: {
    initEchart() {
      let myChart1 = this.$echarts.init(document.getElementById("main1") ,"dark");
      let myChart2 = this.$echarts.init(document.getElementById("main2"), "dark");
      let myChart3 = this.$echarts.init(document.getElementById("main3"), "dark");
      let option1 = {
        backgroundColor: "",
        tooltip: {
          formatter: "{a} <br/>{b} : {c}%",
        },
        series: [
          {
            name: "耗电量",
            type: "gauge",
            max: 10000000,
            progress: {
              show: true,
            },
            itemStyle: {
              color: "#fac858",
            },
            axisLabel: {
              show: false,
            },
            pointer: {
              width: 2,
            },
            detail: {
              valueAnimation: true,
              formatter: "{value}",
              fontSize: 16,
              color: "#fac858",
              offsetCenter: ["0", "30%"],
            },
            data: [
              {
                value: 2321430,
                name: "耗电量",
                title: {
                  offsetCenter: ["0", "80%"],
                  // color: '#FAC858',
                },
              },
            ],
          },
        ],
      };
      let option2 = {
        backgroundColor: "",
        tooltip: {
          formatter: "{a} <br/>{b} : {c}%",
        },
        series: [
          {
            name: "耗水量",
            type: "gauge",
            max: 10000000,
            progress: {
              show: true,
            },
            itemStyle: {
              color: "#73fa58",
            },
            axisLabel: {
              show: false,
            },
            pointer: {
              width: 2,
            },
            detail: {
              valueAnimation: true,
              formatter: "{value}",
              fontSize: 16,
              color: "#73fa58",
              offsetCenter: ["0", "30%"],
            },
            data: [
              {
                value: 5321430,
                name: "耗水量",
                title: {
                  offsetCenter: ["0", "80%"],
                  // color: '#73fa58',
                },
              },
            ],
          },
        ],
      };
       let option3 = {
        backgroundColor: "",
        tooltip: {
          formatter: "{a} <br/>{b} : {c}%",
        },
        series: [
          {
            name: "碳排放量",
            type: "gauge",
            max: 10000000,
            progress: {
              show: true,
            },
            itemStyle: {
              color: "#5878fa",
            },
            axisLabel: {
              show: false,
            },
            pointer: {
              width: 2,
            },
            detail: {
              valueAnimation: true,
              formatter: "{value}",
              fontSize: 16,
              color: "#5878fa",
              offsetCenter: ["0", "30%"],
            },
            data: [
              {
                value: 8321430,
                name: "碳排放量",
                title: {
                  offsetCenter: ["0", "80%"],
                  // color: '#5878fa',
                },
              },
            ],
          },
        ],
      };
      option1 && myChart1.setOption(option1);
      option2 && myChart2.setOption(option2);
      option3 && myChart3.setOption(option3);
    },
  },
};
</script>

<style scoped>
</style>
